{extend name="user-layout" /}
{block name="content"}
<div class="content-wrapper">
    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">交易记录</h4>
                    <form class="forms-sample" action="" method="get">
                        <div class="form-row">
                            <div class="form-group col-xl-4">
                                <label>时间:</label>
                                <input id='txtRange' autocomplete="off" type="text" name="range" class="form-control"
                                    value="{$dateRange}" placeholder="请选择时间">
                            </div>
                            <div class="form-group col-xl-4">
                                <label>支付方式</label>
                                <select name="channel" class="form-control">
                                    <option value="">全部</option>
                                    {volist name="code" id="vo"}
                                    <option {$Request.get.channel==$vo.name ? 'selected' : '' } value="{$vo.name}">
                                        {$vo.remarks}</option>
                                    {/volist}
                                </select>
                            </div>
                            <div class="form-group col-xl-4">
                                <label>支付状态</label>
                                <select name="status" class="form-control">
                                    <option value="">全部</option>
                                    <option {$Request.get.status=='1' ? 'selected' : '' } value="1">等待支付</option>
                                    <option {$Request.get.status=='2' ? 'selected' : '' } value="2">支付成功</option>
                                    <!-- <option {$Request.get.status=='0' ? 'selected' : '' } value="0">订单关闭</option> -->
                                </select>
                            </div>
                            <div class="form-group col-xl-4">
                                <label>订单号:</label>
                                <input type="text" name="trade_no" class="form-control" value="{$Request.get.trade_no}"
                                    placeholder="请输入订单号">
                            </div>
                            <div class="form-group col-xl-4">
                                <button type="submit" class="btn btn-primary btn-submit-orderlist btn-fw"
                                    style="margin-top:1.85em;">搜索</button>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive">
                        <div id='divStat' class="app-channel-btns" style="margin-bottom: 10px;">
                            <blockquote class="layui-elem-quote layui-quote-nm">
                                下单笔数：<span
                                    class="data-10 layui-badge layui-bg-gray">{$stat.totalCount}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                                下单金额：<span
                                    class="data-11 layui-badge layui-bg-gray">{$stat.totalAmount}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                                支付笔数：<span
                                    class="data-20 layui-badge layui-bg-blue">{$stat.payCount}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                                支付金额：<span
                                    class="data-21 layui-badge layui-bg-blue">{$stat.payAmount}</span>&nbsp;&nbsp;
                            </blockquote>
                        </div>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>订单号</th>
                                    <th>产品</th>
                                    <th class="text-center">金额</th>
                                    <th class="text-center">收入</th>
                                    <th>支付方式</th>
                                    <th class="text-center">创建时间</th>
                                    <th class="text-center">更新时间</th>
                                    <th class="text-center">状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {volist name="list" id="vo"}
                                <tr>
                                    <td>{$vo.id}</td>
                                    <td>{$vo.trade_no}</td>
                                    <td title="{$vo.body}">
                                        <p class="line-limit-length">{$vo.subject}</p>
                                    </td>
                                    <td class="text-right text-danger">￥{:number_format($vo.amount,2)}</td>
                                    <td class="text-right text-danger">￥{:number_format($vo.user_in,2)}</td>
                                    <td>{$vo.payRemarks}</td>
                                    <td class="text-center">{$vo.create_time|date='Y/m/d H:i:s',###}</td>
                                    <td class="text-center">{$vo.update_time|date='Y/m/d H:i:s',###}</td>
                                    <td class="text-center">
                                        {switch $vo.status}
                                        {case 1}<label class="badge badge-warning">等待支付</label>{/case}
                                        {case 2}<label class="badge badge-success">支付完成</label>{/case}
                                        {case 0}<label class="badge badge-dark">订单关闭</label>{/case}
                                        {default}<label class="badge badge-info">异常订单</label>
                                        {/switch}
                                    </td>
                                </tr>
                                {/volist}
                            </tbody>
                        </table>
                    </div>
                    {$list->render()}
                    {empty name="list"}
                    <div class="card" id="context-menu-multi">
                        <div class="card-body">
                            <p class="card-text text-center text-danger">
                                <i class="icon-compass"></i>
                                暂无数据...
                            </p>
                        </div>
                    </div>
                    {/empty}
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="pagejs"}
<script src="__STATIC__/cloudui/js/formpickers.js"></script>

<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        var startDate1 = new Date();
        startDate1.setHours(0);
        startDate1.setMinutes(0);
        startDate1.setSeconds(0);
        var endDate1 = new Date();
        endDate1.setHours(23);
        endDate1.setMinutes(59);
        endDate1.setSeconds(59);

        var startDate2 = new Date(new Date().setDate(1));
        startDate2.setHours(0);
        startDate2.setMinutes(0);
        startDate2.setSeconds(0);
        var endDate2 = new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0));
        endDate2.setHours(23);
        endDate2.setMinutes(59);
        endDate2.setSeconds(59);

        laydate.render({
            elem: '#txtRange',
            type: 'datetime',
            // value: new Date().format("yyyy-MM-dd 00:00:00") + ' ~ ' + new Date().format("yyyy-MM-dd 23:59:59"),
            range: '~',
            trigger: 'click',
            btns: ['confirm'],
            extrabtns: [{
                    id: 'today',
                    text: '当天',
                    range: [startDate1, endDate1]
                },
                {
                    id: 'thismonth',
                    text: '当月',
                    range: [startDate2, endDate2]
                },
            ]
        });
    });
</script>
{/block}